<template>
	<view class="home-container">
		<!-- 轮播图 -->
		<view class="banner-section">
			<u-swiper :list="list3" :autoplay="true" :interval="3000" :duration="500" :circular="true" :indicator-dots="true"
				indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff" height="300"
				@click="onBannerClick"></u-swiper>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-title">
				<text class="title-text">功能菜单</text>
			</view>
			<u-grid :col="4" :border="false" @click="onMenuClick">
				<u-grid-item v-for="(item, index) in menuList" :key="index" :custom-style="{ padding: '20rpx 0' }">
					<view class="menu-item">
						<view class="menu-icon-wrapper">
							<u-icon :name="item.icon" :size="40" :color="item.color"></u-icon>
						</view>
						<text class="menu-text">{{ item.title }}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 快捷操作 -->
		<view class="quick-section">
			<view class="quick-title">
				<text class="title-text">快捷操作</text>
			</view>
			<view class="quick-grid">
				<view class="quick-item" v-for="(item, index) in quickList" :key="index" @click="onQuickClick(item)">
					<view class="quick-icon-wrapper" :style="{ backgroundColor: item.bgColor }">
						<u-icon :name="item.icon" :size="32" color="#ffffff"></u-icon>
					</view>
					<text class="quick-text">{{ item.title }}</text>
				</view>
			</view>
		</view>

		<!-- 底部Tab栏 -->
		<CustomTabbar />
	</view>
</template>

<script>
import CustomTabbar from '@/components/CustomTabbar.vue'
import { mapGetters, mapActions } from 'vuex'

export default {
	components: { CustomTabbar },
	data() {
		return {
			list3: [
				"https://image.baidu.com/front/aigc?atn=aigc&fr=home&imgcontent=%7B%22aigcQuery%22%3A%22%22%2C%22imageAigcId%22%3A%224199096378%22%7D&isImmersive=1&pd=image_content&quality=1&ratio=1%3A1&sa=searchpromo_shijian_photohp_inspire&tn=aigc&top=%7B%22sfhs%22%3A1%7D&word=%E7%81%AB%E6%8A%8A%EF%BC%8C%E7%89%B9%E5%86%99%E9%95%9C%E5%A4%B4%EF%BC%8C%E6%B2%B9%EF%BC%8C%E7%81%AB%E6%8A%8A%E7%87%83%E7%83%A7%EF%BC%8C%E7%81%AB%E7%84%B0%E8%88%9E%E5%8A%A8%EF%BC%8C%E6%A3%AE%E6%9E%97%EF%BC%8C%E8%B6%85%E9%AB%98%E6%B8%85%E5%88%86%E8%BE%A8%E7%8E%87%EF%BC%8C%E5%86%99%E5%AE%9E%E9%A3%8E%E6%A0%BC%EF%BC%8C%E6%9A%96%E8%89%B2%E8%B0%83%EF%BC%8C%E7%81%AB%E5%85%89%E7%85%A7%E4%BA%AE%EF%BC%8C%E7%B2%97%E7%B3%99%E6%9C%A8%E6%A3%92",
				"https://image.baidu.com/front/aigc?atn=aigc&fr=home&imgcontent=%7B%22aigcQuery%22%3A%22%22%2C%22imageAigcId%22%3A%224199096378%22%7D&isImmersive=1&pd=image_content&quality=1&ratio=1%3A1&sa=searchpromo_shijian_photohp_inspire&tn=aigc&top=%7B%22sfhs%22%3A1%7D&word=%E7%81%AB%E6%8A%8A%EF%BC%8C%E7%89%B9%E5%86%99%E9%95%9C%E5%A4%B4%EF%BC%8C%E6%B2%B9%EF%BC%8C%E7%81%AB%E6%8A%8A%E7%87%83%E7%83%A7%EF%BC%8C%E7%81%AB%E7%84%B0%E8%88%9E%E5%8A%A8%EF%BC%8C%E6%A3%AE%E6%9E%97%EF%BC%8C%E8%B6%85%E9%AB%98%E6%B8%85%E5%88%86%E8%BE%A8%E7%8E%87%EF%BC%8C%E5%86%99%E5%AE%9E%E9%A3%8E%E6%A0%BC%EF%BC%8C%E6%9A%96%E8%89%B2%E8%B0%83%EF%BC%8C%E7%81%AB%E5%85%89%E7%85%A7%E4%BA%AE%EF%BC%8C%E7%B2%97%E7%B3%99%E6%9C%A8%E6%A3%92",
				"https://image.baidu.com/front/aigc?atn=aigc&fr=home&imgcontent=%7B%22aigcQuery%22%3A%22%22%2C%22imageAigcId%22%3A%224199096378%22%7D&isImmersive=1&pd=image_content&quality=1&ratio=1%3A1&sa=searchpromo_shijian_photohp_inspire&tn=aigc&top=%7B%22sfhs%22%3A1%7D&word=%E7%81%AB%E6%8A%8A%EF%BC%8C%E7%89%B9%E5%86%99%E9%95%9C%E5%A4%B4%EF%BC%8C%E6%B2%B9%EF%BC%8C%E7%81%AB%E6%8A%8A%E7%87%83%E7%83%A7%EF%BC%8C%E7%81%AB%E7%84%B0%E8%88%9E%E5%8A%A8%EF%BC%8C%E6%A3%AE%E6%9E%97%EF%BC%8C%E8%B6%85%E9%AB%98%E6%B8%85%E5%88%86%E8%BE%A8%E7%8E%87%EF%BC%8C%E5%86%99%E5%AE%9E%E9%A3%8E%E6%A0%BC%EF%BC%8C%E6%9A%96%E8%89%B2%E8%B0%83%EF%BC%8C%E7%81%AB%E5%85%89%E7%85%A7%E4%BA%AE%EF%BC%8C%E7%B2%97%E7%B3%99%E6%9C%A8%E6%A3%92",
			],
			// 轮播图数据
			bannerList: [
				{
					image: 'https://image.baidu.com/front/aigc?atn=aigc&fr=home&imgcontent=%7B%22aigcQuery%22%3A%22%22%2C%22imageAigcId%22%3A%224199096378%22%7D&isImmersive=1&pd=image_content&quality=1&ratio=1%3A1&sa=searchpromo_shijian_photohp_inspire&tn=aigc&top=%7B%22sfhs%22%3A1%7D&word=%E7%81%AB%E6%8A%8A%EF%BC%8C%E7%89%B9%E5%86%99%E9%95%9C%E5%A4%B4%EF%BC%8C%E6%B2%B9%EF%BC%8C%E7%81%AB%E6%8A%8A%E7%87%83%E7%83%A7%EF%BC%8C%E7%81%AB%E7%84%B0%E8%88%9E%E5%8A%A8%EF%BC%8C%E6%A3%AE%E6%9E%97%EF%BC%8C%E8%B6%85%E9%AB%98%E6%B8%85%E5%88%86%E8%BE%A8%E7%8E%87%EF%BC%8C%E5%86%99%E5%AE%9E%E9%A3%8E%E6%A0%BC%EF%BC%8C%E6%9A%96%E8%89%B2%E8%B0%83%EF%BC%8C%E7%81%AB%E5%85%89%E7%85%A7%E4%BA%AE%EF%BC%8C%E7%B2%97%E7%B3%99%E6%9C%A8%E6%A3%92',
					title: '智能仓储广告',
					url: '/pages/notice/notice'
				},
				{
					image: 'https://image.baidu.com/front/aigc?atn=aigc&fr=home&imgcontent=%7B%22aigcQuery%22%3A%22%22%2C%22imageAigcId%22%3A%224199096378%22%7D&isImmersive=1&pd=image_content&quality=1&ratio=1%3A1&sa=searchpromo_shijian_photohp_inspire&tn=aigc&top=%7B%22sfhs%22%3A1%7D&word=%E7%81%AB%E6%8A%8A%EF%BC%8C%E7%89%B9%E5%86%99%E9%95%9C%E5%A4%B4%EF%BC%8C%E6%B2%B9%EF%BC%8C%E7%81%AB%E6%8A%8A%E7%87%83%E7%83%A7%EF%BC%8C%E7%81%AB%E7%84%B0%E8%88%9E%E5%8A%A8%EF%BC%8C%E6%A3%AE%E6%9E%97%EF%BC%8C%E8%B6%85%E9%AB%98%E6%B8%85%E5%88%86%E8%BE%A8%E7%8E%87%EF%BC%8C%E5%86%99%E5%AE%9E%E9%A3%8E%E6%A0%BC%EF%BC%8C%E6%9A%96%E8%89%B2%E8%B0%83%EF%BC%8C%E7%81%AB%E5%85%89%E7%85%A7%E4%BA%AE%EF%BC%8C%E7%B2%97%E7%B3%99%E6%9C%A8%E6%A3%92',
					title: '高效物流管理',
					url: '/pages/guide/guide'
				},
				{
					image: 'https://image.baidu.com/front/aigc?atn=aigc&fr=home&imgcontent=%7B%22aigcQuery%22%3A%22%22%2C%22imageAigcId%22%3A%224199096378%22%7D&isImmersive=1&pd=image_content&quality=1&ratio=1%3A1&sa=searchpromo_shijian_photohp_inspire&tn=aigc&top=%7B%22sfhs%22%3A1%7D&word=%E7%81%AB%E6%8A%8A%EF%BC%8C%E7%89%B9%E5%86%99%E9%95%9C%E5%A4%B4%EF%BC%8C%E6%B2%B9%EF%BC%8C%E7%81%AB%E6%8A%8A%E7%87%83%E7%83%A7%EF%BC%8C%E7%81%AB%E7%84%B0%E8%88%9E%E5%8A%A8%EF%BC%8C%E6%A3%AE%E6%9E%97%EF%BC%8C%E8%B6%85%E9%AB%98%E6%B8%85%E5%88%86%E8%BE%A8%E7%8E%87%EF%BC%8C%E5%86%99%E5%AE%9E%E9%A3%8E%E6%A0%BC%EF%BC%8C%E6%9A%96%E8%89%B2%E8%B0%83%EF%BC%8C%E7%81%AB%E5%85%89%E7%85%A7%E4%BA%AE%EF%BC%8C%E7%B2%97%E7%B3%99%E6%9C%A8%E6%A3%92',
					title: '企业数字化升级',
					url: '/pages/update/update'
				},
				{
					image: 'https://image.baidu.com/front/aigc?atn=aigc&fr=home&imgcontent=%7B%22aigcQuery%22%3A%22%22%2C%22imageAigcId%22%3A%224199096378%22%7D&isImmersive=1&pd=image_content&quality=1&ratio=1%3A1&sa=searchpromo_shijian_photohp_inspire&tn=aigc&top=%7B%22sfhs%22%3A1%7D&word=%E7%81%AB%E6%8A%8A%EF%BC%8C%E7%89%B9%E5%86%99%E9%95%9C%E5%A4%B4%EF%BC%8C%E6%B2%B9%EF%BC%8C%E7%81%AB%E6%8A%8A%E7%87%83%E7%83%A7%EF%BC%8C%E7%81%AB%E7%84%B0%E8%88%9E%E5%8A%A8%EF%BC%8C%E6%A3%AE%E6%9E%97%EF%BC%8C%E8%B6%85%E9%AB%98%E6%B8%85%E5%88%86%E8%BE%A8%E7%8E%87%EF%BC%8C%E5%86%99%E5%AE%9E%E9%A3%8E%E6%A0%BC%EF%BC%8C%E6%9A%96%E8%89%B2%E8%B0%83%EF%BC%8C%E7%81%AB%E5%85%89%E7%85%A7%E4%BA%AE%EF%BC%8C%E7%B2%97%E7%B3%99%E6%9C%A8%E6%A3%92',
					title: '一站式仓库APP',
					url: '/pages/notice/notice'
				}
			],
			// 功能菜单数据
			menuList: [
				{ title: '入库管理', icon: 'plus-circle', color: '#2979ff', url: '/pages/inbound/inbound' },
				{ title: '入库上架', icon: 'list', color: '#19be6b', url: '/pages/inbound/shelf' },
				{ title: '出库管理', icon: 'minus-circle', color: '#ff9900', url: '/pages/outbound/outbound' },
				{ title: '盘点管理', icon: 'checkmark-circle', color: '#fa3534', url: '/pages/check/check' },
			],
			// 快捷操作数据
			quickList: [
				{ title: '入库扫码', icon: 'scan', bgColor: '#2979ff', url: '/pages/inbound/scan' },
				{ title: '出库扫码', icon: 'scan', bgColor: '#ff9900', url: '/pages/outbound/scan' },
				{ title: '库存预警', icon: 'warning', bgColor: '#fa3534', url: '/pages/warning/warning' },
				{ title: '今日任务', icon: 'calendar', bgColor: '#19be6b', url: '/pages/today-task/today-task' }
			]
		}
	},
	computed: {
		...mapGetters('auth', ['isLoggedIn', 'userInfo'])
	},
	onLoad() {
		// 校验userInfo
		let userInfo = this.userInfo
		if (!userInfo || !userInfo.token) {
			userInfo = uni.getStorageSync('userInfo')
			if (!userInfo || !userInfo.sessionid) {
				uni.reLaunch({ url: '/pages/login/login' })
				return
			} else {
				this.$store.commit('auth/SET_USER_INFO', userInfo)
			}
		}
		// 页面加载时的初始化
		this.initPage()
	},
	methods: {
		// 初始化页面
		initPage() {
			// 可以在这里获取用户信息、权限等
			console.log('WMS首页初始化')
		},

		// 轮播图点击事件
		onBannerClick(index) {
			const item = this.bannerList[index]
			if (item.url) {
				uni.navigateTo({
					url: item.url
				})
			}
		},

		// 功能菜单点击事件
		onMenuClick(index) {
			const item = this.menuList[index]
			if (item.url) {
				uni.navigateTo({
					url: item.url
				})
			}
		},

		// 快捷操作点击事件
		onQuickClick(item) {
			if (item.url) {
				uni.navigateTo({
					url: item.url
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.home-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx; // 为底部Tab栏留出空间
}

// 轮播图区域
.banner-section {
	margin-bottom: 20rpx;

	::v-deep .u-swiper {
		border-radius: 0 0 20rpx 20rpx;
	}
}

// 功能菜单区域
.menu-section {
	background-color: #ffffff;
	margin: 0 20rpx 20rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

	.menu-title {
		margin-bottom: 40rpx;

		.title-text {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.menu-icon-wrapper {
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
			background-color: #f8f9fa;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			border: 1rpx solid #e9ecef;
		}

		.menu-text {
			font-size: 28rpx;
			color: #666666;
		}
	}
}

// 快捷操作区域
.quick-section {
	background-color: #ffffff;
	margin: 0 20rpx 20rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

	.quick-title {
		margin-bottom: 40rpx;

		.title-text {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.quick-grid {
		display: flex;
		justify-content: space-between;
	}

	.quick-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 25rpx 15rpx;

		.quick-icon-wrapper {
			width: 100rpx;
			height: 100rpx;
			border-radius: 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		}

		.quick-text {
			font-size: 28rpx;
			color: #666666;
		}
	}
}

// 通用样式
.title-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

// 适配App端的特殊样式
/* #ifdef APP-PLUS */
.menu-section {
	padding: 50rpx 30rpx;
}

.quick-section {
	padding: 50rpx 30rpx;
}

.menu-item .menu-icon-wrapper {
	width: 120rpx;
	height: 120rpx;
}

.quick-item .quick-icon-wrapper {
	width: 120rpx;
	height: 120rpx;
}

.tabbar {
	padding: 20rpx 0 50rpx;
}

.scan-button {
	width: 140rpx !important;
	height: 140rpx !important;
}

/* #endif */

// 适配不同屏幕尺寸
@media screen and (max-width: 750rpx) {

	.menu-section,
	.quick-section {
		padding: 30rpx 20rpx;
	}

	.menu-item .menu-icon-wrapper,
	.quick-item .quick-icon-wrapper {
		width: 80rpx;
		height: 80rpx;
	}

	.scan-button {
		width: 100rpx !important;
		height: 100rpx !important;
	}
}
</style>
